﻿<!DOCTYPE html>
<html id="home" lang="en">
    
    <head>
        <title>Attaching Remote Media Streams ® Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/100325991024054712503">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <style>
            @import url(https://fonts.googleapis.com/css?family=Inconsolata);
            html {
                background: #eee;
            }
            body {
                font-family:"Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
                font-size: 1.2em;
                line-height: 1.2em;
                margin: 0;
            }
            article, footer {
                display: block;
                max-width: 900px;
                min-width: 360px;
                width: 80%;
            }
            article {
                background: #fff;
                border: 1px solid;
                border-color: #ddd #aaa #aaa #ddd;
                margin: 2.5em auto 0 auto;
                padding: 2em;
            }
            h1 {
                margin-top: 0;
            }
            article p:first-of-type {
                margin-top: 1.6em;
            }
            article p:last-child {
                margin-bottom: 0;
            }
            footer {
                margin: 0 auto 2em auto;
                text-align: center;
            }
            footer a {
                color: #666;
                font-size: inherit;
                padding: 1em;
                text-decoration: none;
                text-shadow: 0 1px 1px #fff;
            }
            footer a:hover, footer a:focus {
                color: #111;
            }
            h1, h2 {
                border-bottom: 1px solid black;
                display: inline;
                font-weight: normal;
                line-height: 36px;
                padding: 0 0 3px 0;
            }
            a {
                color: #2844FA;
                text-decoration: none;
            }
            a:hover, a:focus {
                color: #1B29A4;
            }
            a:active {
                color: #000;
            }
            :-moz-any-link:focus {
                border: 0;
                color: #000;
            }
            ::selection {
                background: #ccc;
            }
            ::-moz-selection {
                background: #ccc;
            }
            button, input[type=button] {
                -moz-border-radius: 3px;
                -moz-transition: none;
                -webkit-transition: none;
                background: #0370ea;
                background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
                background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
                border: 1px solid #076bd2;
                border-radius: 3px;
                color: #fff;
                display: inline-block;
                font-family: inherit;
                font-size: .8em;
                line-height: 1.3;
                padding: 5px 12px;
                text-align: center;
                text-shadow: 1px 1px 1px #076bd2;
                font-size: 1.5em;
            }
            button:hover, input[type=button]:hover {
                background: rgb(9, 147, 240);
            }
            button:active, input[type=button]:active {
                background: rgb(10, 118, 190);
            }
            button[disabled], input[type=button][disabled] {
                background: none;
                border: 1px solid rgb(187, 181, 181);
                color: gray;
                text-shadow: none;
            }
            strong {
                color: rgb(204, 14, 14);
                font-family: inherit;
                font-weight: normal;
            }
            tr, td, th {
                vertical-align: top;
                padding: .7em 1.4em;
                border-top: 1px dotted #BBA9A9;
                border-right: 1px dotted #BBA9A9;
            }
            table {
                width: 100%;
            }
            .videos-container {
                display: inline-block;
                border: 2px solid black;
                padding: .1em;
                border-radius: 0.2em;
                margin: 2em .2em;
                background: white;
                vertical-align: top;
            }
            .videos-container h2 {
                border: 0;
                border-top: 1px solid black;
                margin: 0;
                text-align: center;
                display:block;
            }
            video {
                width:20em;
                height: 15em;
                background: black;
            }
        </style>
        <!-- for HTML5 el styling -->
        <script>
            document.createElement('article');
            document.createElement('footer');
        </script>
    </head>
    
    <body>
        <article> <a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid red; color: red; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">←HOME</a>

        <h1>
			<a href="https://github.com/muaz-khan/WebRTC-Experiment/blob/master/experimental" target="_blank">Attaching Remote Media Streams</a>
        </h1>

            <p> <span>Copyright © 2013</span>
 <a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a><span>&lt;</span><a href="http://twitter.com/muazkh" target="_blank">@muazkh</a><span>&gt;.</span>

            </p>
            <section class="plusone-gplus">
                <div class="g-plusone" data-href="https://www.webrtc-experiment.com/"></div>
            </section>
            <div id="videos-container" style="text-align:center;"></div>
			<script>
				function appendStream(stream, h2Content) {
					console.log('stream', stream);
					console.log('getAudioTracks', stream.getAudioTracks());
					console.log('getVideoTracks', stream.getVideoTracks());
					
					var div = document.createElement('div');
					div.className = 'videos-container';
					
					var audio = document.createElement('audio');
					audio.src = URL.createObjectURL(stream);
					audio.autoplay = true;
					audio.controls = true;
					div.appendChild(audio);
					
					var h2 = document.createElement('h2');
					h2.innerHTML = h2Content;
					div.appendChild(h2);
					
					audio.play();
					document.getElementById('videos-container').appendChild(div);
					return audio;
				}
				 var mediaConstraints = {
					optional: [],
					mandatory: {
						OfferToReceiveAudio: true,
						OfferToReceiveVideo: false
					}
				};
			</script>
            <script>
                var offererToAnswerer = document.getElementById('peer1-to-peer2');
                var answererToOfferer = document.getElementById('peer2-to-peer1');

                window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
                window.RTCSessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
                window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;

                navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
                window.URL = window.webkitURL || window.URL;

                window.iceServers = {
                    iceServers: [{
                            url: 'stun:23.21.150.121'
                        }
                    ]
                };
            </script>
            <script>
				var offerer, answerer;
                /* offerer */

                function offererPeer(stream) {
                    offerer = new RTCPeerConnection(window.iceServers);
                    offerer.addStream(stream);

                    offerer.onaddstream = function (event) {
                        appendStream(event.stream, 'for offerer').pause();
						
						// Now, trying to attach remote media stream
						!window.once && setTimeout(function() {
							window.once = true;
							
							var div = document.createElement('div');
							div.innerHTML = '<hr /><hr /><h2>Remote media streams are attached for below videos</h2><hr /><hr />';
							document.getElementById('videos-container').appendChild(div);
							
							offererPeer2(event.stream);
						}, 1000);
                    };

                    offerer.onicecandidate = function (event) {
                        if (!event || !event.candidate) return;
                        answerer.addIceCandidate(event.candidate);
                    };

                    offerer.createOffer(function (offer) {
                        offerer.setLocalDescription(offer);
                        answererPeer(offer, stream);
                    }, null, mediaConstraints);
                }
            </script>
            <script>
                /* answerer */

                function answererPeer(offer, stream) {
                    answerer = new RTCPeerConnection(window.iceServers);
                    answerer.addStream(stream);

                    answerer.onaddstream = function (event) {
                        appendStream(event.stream, 'for answerer').pause()
                    };

                    answerer.onicecandidate = function (event) {
                        if (!event || !event.candidate) return;
                        offerer.addIceCandidate(event.candidate);
                    };

                    answerer.setRemoteDescription(offer);
                    answerer.createAnswer(function (answer) {
                        answerer.setLocalDescription(answer);
                        offerer.setRemoteDescription(answer);
                    }, null, mediaConstraints);
                }
            </script>
            <script>
                var video_constraints = {
                    mandatory: {},
                    optional: []
                };

                function getUserMedia(callback, constraints) {
                    var n = navigator;
                    n.getMedia = n.webkitGetUserMedia || n.mozGetUserMedia;
                    n.getMedia(constraints || {
                        audio: true,
                        video: false
                    }, callback, onerror);

                    function onerror(e) {
						if (location.protocol === 'http:')
                            throw '<https> is mandatory to capture screen.';
                        else
                            throw 'Screen capturing process is denied. Are you enabled flag: "Enable screen capture support in getUserMedia"?';
							
                        console.error(e);
                    }
                }
            </script>
            <script>
                getUserMedia(function (stream) {
					var div = document.createElement('div');
					div.innerHTML = '<hr /><hr /><h2>Local media streams are attached for below videos</h2><hr /><hr />';
					document.getElementById('videos-container').appendChild(div);
                    offererPeer(stream);
                });
            </script>
			
			<!-- for remote media streams attachment -->
			
			<script>
				var offerer2, answerer2;

                function offererPeer2(stream) {
                    offerer2 = new RTCPeerConnection(window.iceServers);
                    offerer2.addStream(stream);

                    offerer2.onaddstream = function (event) {
                        appendStream(event.stream, 'for offerer2');
                    };

                    offerer2.onicecandidate = function (event) {
                        if (!event || !event.candidate) return;
                        answerer2.addIceCandidate(event.candidate);
                    };

                    offerer2.createOffer(function (offer) {
                        offerer2.setLocalDescription(offer);
                        answererPeer2(offer, stream);
                    }, null, mediaConstraints);
                }
            </script>
            <script>
                /* answerer2 */

                function answererPeer2(offer, stream) {
                    answerer2 = new RTCPeerConnection(window.iceServers);
                    answerer2.addStream(stream);

                    answerer2.onaddstream = function (event) {
                        appendStream(event.stream, 'for answerer2');
                    };

                    answerer2.onicecandidate = function (event) {
                        if (!event || !event.candidate) return;
                        offerer2.addIceCandidate(event.candidate);
                    };

                    answerer2.setRemoteDescription(offer);
                    answerer2.createAnswer(function (answer) {
                        answerer2.setLocalDescription(answer);
                        offerer2.setRemoteDescription(answer);
                    }, null, mediaConstraints);
                }
            </script>

            <section style="border: 1px solid rgb(189, 189, 189); margin: 1em 3em; border-radius: .2em;">
                <h2 id="feedback" style="padding: .2em .4em; border-bottom: 1px solid rgb(189, 189, 189);">Feedback</h2>
                <div>
                    <textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button>
            </section>
        </article>
        <footer>
            <p> <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a>© <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>, <span>2013 </span>» <a href="mailto:muazkh@gmail.com" target="_blank">Email</a>»
                <a
                href="http://twitter.com/muazkh" target="_blank">@muazkh</a>» <a href="https://github.com/muaz-khan" target="_blank">Github</a>

            </p>
        </footer>
        <script src="https://www.webrtc-experiment.com/common.js"> </script>
    </body>

</html>